<template>
  <div class="bottom-section">
    <!-- 电池包信息栏 -->
    <div class="panel battery-status">
      <div class="panel-header">
        <span><font-awesome-icon icon="star" />电池</span>
      </div>
      <div class="panel-content">
        <el-tabs v-model="batteryActiveTab" class="full-height-tabs custom-tabs" tab-position="top">
          <!-- 第一个选项卡画面 -->
          <el-tab-pane name="battery1">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>功率曲线</span>
              </div>
            </template>

            <div class="tab-content">
              <!-- 图表容器 -->
              <div class="sample-content panel1">
                <BatteryPowerChart />
              </div>
            </div>
          </el-tab-pane>
          <!-- 第二个选项卡画面 -->
          <el-tab-pane name="battery2">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>历史趋势</span>
              </div>
            </template>
            <div class="tab-content">
              <!-- //图表容器 -->
              <div class="sample-content panel2">
                电池充放电曲线图表区域
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 逆变器/PCS信息栏 -->
    <div class="panel inverter-trend">
      <div class="panel-header">
        <span><font-awesome-icon icon="star" />逆变器/PCS</span>
      </div>
      <div class="panel-content">
        <el-tabs v-model="inverterActiveTab" class="full-height-tabs custom-tabs" tab-position="top">
          <el-tab-pane name="inverter1">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>功率曲线</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel1">
                <!-- PCS实时数据 功率和电量曲线图表 -->
                <pcsChart 
                  chartHeight="100%" 
                  leftAxisTextColor="#00FF00"
                  rightAxisTextColor="#00a8ff"
                  bottomAxisTextColor="#fff"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="inverter2">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>历史趋势</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel2">
                <h3>逆变器效率分析</h3>
                <div class="chart-placeholder">
                  效率分析图表区域
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 太阳能光伏板信息栏 -->
    <div class="panel solar-panel">
      <div class="panel-header">
        <span><font-awesome-icon icon="star" />光伏</span>
      </div>
      <div class="panel-content">
        <el-tabs v-model="solarActiveTab" class="full-height-tabs custom-tabs" tab-position="top">
          <el-tab-pane name="solar1">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>实时数据</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel1">
               <!-- PV 功率和发电量曲线图表 -->
                <PvChart               />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="solar2">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>历史趋势</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel2">
                <h3>光伏发电趋势</h3>
                <div class="chart-placeholder">
                  发电趋势图表区域
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 发电和负载曲线信息栏 -->
    <div class="panel power-curve">
      <div class="panel-header">
        <span><font-awesome-icon icon="star" />发电\负载曲线</span>
      </div>
      <div class="panel-content">
        <el-tabs v-model="powerActiveTab" class="full-height-tabs custom-tabs" tab-position="top">
          <el-tab-pane name="power1">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>实时数据</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel1">
                <h3>功率曲线监控</h3>
                <div class="data-grid">
                  <div class="data-item">
                    <div class="label">峰值功率</div>
                    <div class="value">4.2kW</div>
                  </div>
                  <div class="data-item">
                    <div class="label">当前负载</div>
                    <div class="value">2.8kW</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="power2">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>历史趋势</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel2">
                <h3>负载分析</h3>
                <div class="chart-placeholder">
                  负载分析图表区域
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 气象数据信息栏 -->
    <div class="panel weather-data">
      <div class="panel-header">
        <span><font-awesome-icon icon="star" />气象信息</span>
      </div>
      <div class="panel-content">
        <el-tabs v-model="weatherActiveTab" class="full-height-tabs custom-tabs" tab-position="top">
          <el-tab-pane name="weather1">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>实时数据</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel1">
                <h3>实时气象数据</h3>
                <div class="data-grid">
                  <div class="data-item">
                    <div class="label">温度</div>
                    <div class="value">25°C</div>
                  </div>
                  <div class="data-item">
                    <div class="label">湿度</div>
                    <div class="value">65%</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="weather2">
            <template #label>
              <div class="custom-tab-label">
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>历史趋势</span>
              </div>
            </template>
            <div class="tab-content">
              <div class="sample-content panel2">
                <h3>天气预报</h3>
                <div class="chart-placeholder">
                  未来天气预报区域
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { DataLine, TrendCharts } from '@element-plus/icons-vue';
import BatteryPowerChart from './bottomComponent/BatteryPowerChart.vue';
import pcsChart from './bottomComponent/pcsChart.vue';
import PvChart from './bottomComponent/PvChart.vue';

const batteryChart = ref(null)
const inverterChart = ref(null)
const powerChart = ref(null)
const solarChart = ref(null)

// 定义每个面板的活动标签页
const batteryActiveTab = ref('battery1')
const inverterActiveTab = ref('inverter1')
const solarActiveTab = ref('solar1')
const powerActiveTab = ref('power1')
const weatherActiveTab = ref('weather1')

onMounted(() => {
  // Your existing mounted logic
})
</script>

<style lang="scss" scoped>
  //  @import '@/views/home/components/styles/BottomSection.scss';
  @import 'styles/BottomSection.scss';
</style>